<!-- 选择房间 -->
<template>
  <div>
    <simpleTable :showCheckBox="true" :hasPagination="true" :pageObj="pageObj" :listObject='listObject'
      :columnList='columnList' @searchClick='searchClick' tabName="groupList">

      <el-table-column slot="remoteOpen" label="远程开门" align="center" width="80">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.remoteOpen" :active-value="true" :inactive-value="false"
            @change="changeRemoteOpen(scope.row)"></el-switch>
        </template>
      </el-table-column>

      <el-table-column slot="operate" label="操作" align="center" width="120" v-if="selectType !== '多选'">
        <template slot-scope="scope">
          <div class='operateColumn'>
            <span @click="checkItem(scope.row)">选择</span>
          </div>
        </template>
      </el-table-column>
    </simpleTable>
  </div>
</template>

<script>
import simpleTable from '@/components/SimpleTable'
import { listRoomNoUser } from "@/api/gate/gate";
import { getRoomTypeLabel, getGateOnlineStatusLabel } from "@/utils/const";
export default {
  props: {
    selectType: {
      type: String,
      default: () => {
        return '多选'
      }
    },
    tabName: {
      type: String,
      default: () => {
        return ''
      }
    },
    userId: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  components: { simpleTable },
  data() {
    return {
      // table数据
      listObject: {
        list: [],
        total: 0
      },
      // 分页列表
      pageObj: {
        pageSize: 10,
        total: 0,
        pageNo: 1,
        isRegistered: true
      },
      // table 的 column 信息
      columnList: [
        { prop: 'name', label: '房间名称', minwidth: '100', align: 'left', search: true },
        {
          prop: 'type', label: '类型', minwidth: '100', align: 'left',
          formatter: (row) => { return getRoomTypeLabel(row.type) }
         },
        {
          prop: 'onlineState', label: '设备状态', minwidth: '100', align: 'left',
          formatter: (row) => { return getGateOnlineStatusLabel(row.onlineState) }
         },
        { slot: 'remoteOpen', label: '远程开门' },
        { slot: 'operate', label: '操作' }
      ],
      // 搜索数据
      search: {},
      // table中选择的数据id集合
      ids: [],
      // table中选择的数据
      tabList: [],

    };
  },
  computed: {

  },
  watch: {},
  created() {
  },
  mounted() {
    this.getPageList()
    // 列表选中，获取ids
    this.$bus.$on('selectionChange', (value, name) => {
      console.log( 'selectionChange', value);
      if (name === 'groupList') {
        this.ids = []
        this.tabList = value
        if (value.length > 0) {
          value.map(item => {
            this.ids.push(item.id)
          })
        }
        this.$nextTick(() => {
          this.$emit('checkList', this.tabList)
        })
      }

    })
  },
  // 销毁数据监听
  beforeDestroy() {
    this.$bus.$off('selectionChange')
  },
  methods: {
    getPageList() {
      let param = { ...this.pageObj, ...this.search }
      param.userId = this.userId

      listRoomNoUser(param).then(res => {
        let list = res.data.list || []
        let total = res.data.total || 0

        let newList = []
        for (var i = 0; i < list.length; i++) {
          newList.push({ ...list[i], remoteOpen: false })
        }
        this.listObject = { list: newList, total: total }
        this.pageObj.total = total
      })
    },
    // 搜索
    searchClick(obj) {
      this.search = obj
      this.pageObj.pageNo = 1
    },
    checkItem(item) {
      this.$emit('checkItem', item)
    },
    changeRemoteOpen(row) {
      if (!this.tabList.length) {
        return
      }
      if (!row.id) {
        return;
      }
      for (var i = 0; i < this.tabList.length; i++) {
        if (this.tabList[i].id == row.id) {
          this.tabList[i].remoteOpen = row.remoteOpen
        }
      }
    }
  },
};
</script>

<style scoped lang="scss"></style>
